{{each List as item i}}
<div class="{{item.status=='idle'?'left_green':'left_origan'}}">
    <img src="{{item.img}}">
    <div class="item_right">
        <div>
            <span href="#"><i class="icon-desktop"></i>{{item.address}}</span>
            <span class="{{item.status=='idle'?'green':'origan'}}">{{item.status}}</span>
            <span href="#"><i class="icon-info"></i>{{item.ip}}</span>
            <span href="#"><i class="icon-folder"></i>{{item.file}}</span>
        </div>
        <div class="tags">
            <div>
                <i class="icon-plus add_item" itemId="{{item.id}}"></i>
                <div id="dialog_{{item.id}}" class="dialog hide" name="dialog">
                    <i itemId="{{item.id}}" class="icon-close close_dialog"></i>
                    <p>Separate multiple resource name with commas</p>
                    <input id="resource_{{item.id}}" type="text" placeholder="input value">
                    <div>
                        <button class="add" itemId="{{item.id}}">Add Resource</button>
                        <button class="cancle" itemId="{{item.id}}">Cancel</button>
                    </div>
                </div>
            </div>
            <div class="tags_icon tagbox_{{item.id}}">
                {{each item.environment as web j}}
                <div>
                    <span class="tag">{{web}}<i class="icon-trash delete" style="margin-left: 10px;"></i></span>
                </div>
                {{/each}}
            </div>
            <div class="status {{item.operability?'hide':''}}">
                <div>
                    <span class="tag"><i class="icon-deny delete" style="margin-right: 10px;"></i>Deny</span>
                </div>
            </div>
        </div>
    </div>
</div>
{{/each}}